<template>
  <div class="box">
    <div><MyTop name="我的经验" dec="根据亲身经历发布疾病经验"></MyTop></div>
    <div>
      <div class="item">
        <el-row>
          <el-col :span="4">经验标题</el-col>
          <el-col :span="20"
            ><el-input v-model="title" placeholder="请输入经验标题"></el-input
          ></el-col>
        </el-row>
      </div>
      <div class="item">
        <el-row>
          <el-col :span="4">经验标签</el-col>
          <el-col :span="18">
            <div class="label">
              <span
                v-for="(item, index) in choseArr"
                :key="index"
                :class="colorArr[index % 4]"
                >{{ item }}<i class="el-icon-close" @click="del(item)"></i
              ></span>
            </div>
          </el-col>
          <el-col :span="2" @click.native="moreLabel" class="more">更多</el-col>
        </el-row>
        <el-row class="label-area">
          <el-col :span="8" class="line">
            <div class="dis">
              <span v-for="(item, index) in disArr" :key="index" @click="addClose(item.name)"
                >{{ item.name }}<i class="el-icon-plus"></i
              ></span>
            </div>
            <p class="label-title">常见疾病<span @click="changeDis">换一换</span></p>
          </el-col>
          <el-col :span="8" class="line">
            <div class="dis">
              <span
                v-for="item in staCla.pos"
                :key="item.id"
                class="yiji"
                @click="addClose(item.name)"
                ><img :src="item.iconImg" alt="" />{{ item.name
                }}<i class="el-icon-plus"></i
              ></span>
            </div>
            <p class="label-title">部位分类</p>
          </el-col>
          <el-col :span="8">
            <div class="dis">
              <span
                v-for="item in staCla.dep"
                :key="item.id"
                class="yiji"
                @click="addClose(item.name)"
                ><img :src="item.iconImg" alt="" />{{ item.name
                }}<i class="el-icon-plus"></i
              ></span>
            </div>
            <p class="label-title">科室分类</p>
          </el-col>
        </el-row>
      </div>
      <div class="item">
        <el-row>
          <el-col :span="4">详细内容</el-col>
          <el-col :span="20">
            <div id="div" style="position: relative; z-index: 0"></div
          ></el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="5" :offset="19">
            <el-button type="primary" @click="save" class="qrbtn"
              >确定</el-button
            >
          </el-col>
        </el-row> -->
      </div>
      <div class="item">
        <el-row>
          <el-col :span="4">插入图片</el-col>
          <el-col :span="20" class="item-right">
            <p class="img-tip">
              <i class="iconfont icon-zhushi"
                >仅支持JPG、PNG格式，最好为正方形
              </i>
            </p>
            <el-upload
              :action="uploadUrl"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="handleAvatarSuccess"
              :headers="headers"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <!-- <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" /> </el-dialog
          > -->
          </el-col>
        </el-row>
      </div>
      <el-row>
        <el-col :span="8" :offset="8" class="moreBtn" @click.native="addExp"
          ><i class="iconfont el-icon-check"></i>确定发布</el-col
        >
        <el-col :span="4" class="caogao" @click.native="addCaogao">
          存为草稿</el-col
        >
      </el-row>
    </div>
  </div>
</template>

<script>
import E from "wangeditor";
import MyTop from "../components/MyTop.vue";
import con from "../utils/constant";
import qs from "qs";
export default {
  components: {
    MyTop,
  },
  data() {
    return {
      desc: "", //详细内容
      title: "", //标题
      uploadUrl: con.uploadUrl, //文件上传地址
      inputBlog: {},
      choseArr: [],
      colorArr: ["bi-bg", "yi-bg", "ri-bg", "gi-bg"],
      disArr: [],
      staCla: {
        //两种状态的分类
        pos: [],
        dep: [],
      },
      //上传照片
      dialogImageUrl: "",
      dialogVisible: false,
      imgArr: [],
      headers: {
        token: JSON.parse(sessionStorage.getItem("token")),
      },
      page:1
    };
  },
  mounted() {
    //创建富文本编辑器
    var editor = new E("#div");
    let config = editor.customConfig ? editor.customConfig : editor.config;
    config.onchange = (html) => {
      this.inputBlog.bcontext = html;
    };
    editor.create();
    //获取分类树classifyTree
    this.staCla.pos = this.$getStorage("classifyTree").partTree;
    this.staCla.dep = this.$getStorage("classifyTree").departmentTree;
    //获取疾病列表
    this.getDisease();
    //判断是否有传递标签数组
    if(this.$route.query.choseArr){
      this.choseArr= this.$route.query.choseArr
    }
    this.getDis()
  },
  methods: {
    changeDis(){
      this.page=this.page+1
      this.getDis()
    },
    getDis(){
      this.$axios({
        url: "/sickness/getAll",
        method: "post",
        data: this.$qs.stringify({
          page:this.page,
          size: 10,
        }),
      }).then((res) => {
         if (res.code == "200") {
           if(res.data.length<10){
             this.page=0;
             this.changeDis()
           }
           this.disArr=res.data
         }
      })
    },
    save() {
      console.log(this.inputBlog.bcontext);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //上传成功
    handleAvatarSuccess(res, file) {
      console.log(res);
      //添加图片
      this.imgArr.push(res.fileName);
      // this.imageUrl=res.fileName;
      // this.changeUserinfo()
    },
    moreLabel() {
      this.$router.push({path:"/main/explabel",query:{choseArr:this.choseArr}});
    },
    //添加tag
    addClose(name) {
      if (this.choseArr.find((item) => item == name) == undefined) {
        this.choseArr = [...this.choseArr, name];
      }
    },
    //删除tag
    del(name) {
      this.choseArr = this.choseArr.filter((item) => {
        return item != name;
      });
    },
    //发布经验
    addExp() {
      // console.log(this.title,this.imgArr,this.inputBlog.bcontext,this.choseArr.join(','))
      let { nickname, headImg, id } = this.$getStorage("userinfo");
      this.$axios({
        method: "post",
        url: "/experience/upsert",
        data: {
          author: nickname,
          headImg: headImg,
          userId: id,
          content: this.inputBlog.bcontext,
          imgArr: this.imgArr,
          status: true,
          title: this.title,
          tag: this.choseArr.join(","),
        },
      }).then((res) => {
        console.log(res);
        if (res.code != "200") {
          this.$message.error(res.msg);
        } else {
          this.$message.success("添加成功");
          this.$router.go(-1);
        }
      });
    },
    //存为草稿
    addCaogao() {
      let { nickname, headImg, id } = this.$getStorage("userinfo");
      this.$axios({
        method: "post",
        url: "/experience/upsert",
        data: {
          author: nickname,
          headImg: headImg,
          userId: id,
          content: this.inputBlog.bcontext,
          imgArr: this.imgArr,
          status: false,
          title: this.title,
          tag: this.choseArr.join(","),
        },
      }).then((res) => {
        console.log(res);
        if (res.code != "200") {
          this.$message.error(res.msg);
        } else {
          this.$message.success("添加成功");
          this.$router.go(-1);
        }
      });
    },
    //获取疾病
    getDisease() {
      this.$axios({
        method: "get",
        url: "/sickness/getHotSickness",
      }).then((res) => {
        console.log(res);
        if (res.code == "200") {
          this.disArr=res.data
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../less/relexp.less");
</style>